<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title></title>

	<link rel="stylesheet" href="/res/css/amazeui.min.css">
	<link rel="stylesheet" href="/res/css/admin.css">
	<style>
		.admin-main {
			padding-top: 0px;
		}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
</head>
<body>

<div class="am-cf admin-main">
	<!-- content start -->
	<div class="admin-content">
		<div class="admin-content-body">
			<div class="am-cf am-padding am-padding-bottom-0">
				<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">调查问卷统计</strong><small></small></div>
			</div>
			<br/>
			<div class="am-g">
				<form class="am-form" method="get" action="/questionnaire/analysis">
					<div class="am-u-sm-3 am-u-md-3">
						<select id="questionnaire" name="city" lay-verify="">
							<option value="">请选择一个调查问卷</option>
							<option th:each="item:${questionaires}" th:text="${item.name}" th:value="${item.id}">
							</option>
						</select>
					</div>
					<div class="am-u-sm-3 am-u-md-3">
						<select  name="city" lay-verify="" id="subject" onclick="getSubjectByQnId()">
							<option  value="">请选择一个问卷题目</option>
						</select>
					</div>
					<div class="am-u-sm-3 am-u-md-3">
                        <span class="am-input-group-btn">
                            <button class="am-btn am-btn-default" type="submit" onclick="search()">搜索</button>
                        </span>
					</div>
					<div class="am-u-sm-3 am-u-md-3">
					</div>
				</form>
			</div>
			<div class="am-g">

				<div id="main" style="width: 100%;height:400px; align-content: center; margin-top: 5%;">

				</div>

			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	var option = {
		title: {
			text: '学生就业情况饼图',
			subtext: '依据系统收集数据',
			x: 'center'
		},
		tooltip: {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		legend: {
			orient: 'vertical',
			left: 'left',
			data: ['已就业', '未就业']
		},
		series: [
			{
				name: '就业情况',
				type: 'pie',
				radius: '55%',
				center: ['50%', '60%'],
				data: [
					{value: [[${groupInfo}]], name: '已就业'},
					{value: [[${groupInfo}]], name: '未就业'}
				],
				itemStyle: {
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}
		]
	};


	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
	function  getSubjectByQnId(){
		let qnId = $('#questionnaire option:selected').val()
		$.ajax({
                 type: "get",
                 url: "/questionnaire/subjects/"+qnId,
                 dataType: 'json',
                 contentType: "application/json; charset=utf-8",
                 success: function(result) {
                     let t2 = $("#subject").empty();
                     for(let i=0;i<result.length;i++){
                      t2.append("<option value='"+result[i].id+"'>"+ result[i].content+"</option>");
                     }
                 }
             });
	}
    let url = "";
	function search(){
	      let f = document.getElementsByTagName("form")[0];
	      url = url == ""?f.action:url;
          f.action=url+"/"+$('#questionnaire').val()+"/"+$('#subject').val()
          alert(f.action);

	}
</script>
</body>
</html>
